<template>
	<div class="coinlist">
		<div class="top">
			<div class="header vux-1px-b" v-show="false">
				<div class="iconfont back-icon" @click="goBack">&#xe624;</div>
				宝店认领
			</div>
			<div class="search">
				<div class="search-bar">
					<div class="platform" @click="handlePlatform">
						<span>{{platformName}}</span>
						<span class="iconfont">&#xe779;</span>
					</div>					
					<div class="search-warrp">
						<div class="iconfont search-icon">&#xe60b;</div>
						<form action="" @submit="stopSub">																
							<input class="search-ipt" v-model="key" type="search" placeholder="请输入关键字" autocomplete="off"/>	
						</form>
					</div>
				</div>
			</div>
		</div>
		
		<div class="content" ref="store" id="scroll">
			<ul>
				<li class="content-item vux-1px-b" v-for="item in storeList" @click="toGetStore(item.id,item.shop_id,item)">
					<div class="store-avatar">
						<img :src="item.face_path+'?x-oss-process=style/w160h160'" height="100%" width="100%" />
					</div>
					<div class="store-info">
						<h3 class="title">{{item.shop_name}}</h3>
						<!--<p class="desc">有{{item.join_count}}名宝店客参与制作</p>-->
					</div>
					<div class="store-status" v-if="isShare == 0" :class="{'st-sh':item.user_status == 0}">{{item.state_name}}</div>
					<div class="store-status" v-if="isShare == 1"></div>
					<div class="iconfont right-icon">&#xe62d;</div>
				</li>
				<div class="more-data" v-show="storeList.length >= 10">{{hasData}}</div>
			</ul>				
		</div>
	
		<transition name="fade">
			<platform-list v-show="showPlatform"  @close="closePlatform" :platformList="platformList" @closeP="closeParPlatform"></platform-list>
		</transition>
		<transition name="fade-drop">
			<div class="drop" v-if="showPlatform" @click="closePlatform"></div>
		</transition>
		<release v-show="hasStore" @close="closeRel" :platforms="platformList" ></release>
		<transition name="fadeOI">
			<login @close="closeDailog" :param="param" @closeP="logStatus" v-show="isLogin"></login>
		</transition>
	</div>
</template>

<script>
	import Login from './login'
	import { setCookie, getCookie, removeCookie, clearCookie } from '@/assets/js/cookie'
	import {getUrlParam}  from '@/assets/js/getUrlParam'
	import Bscroll from 'better-scroll'
	import Release from './release'
	import PlatformList from './platformList'
	export default{
		name : 'coinShopList',
		data(){
			return{
				isLogin      : false,
				isWeChat     : true,
				showPlatform : false,
				platformList : [],
				storeList    : [],
				platformId	 : '',
				platformName : '',
				key          : '',
				page         : 1,
				pageSize     : 20,
				hasStore     : false,
				hasPage      : true,
				hasData      : '上拉加载更多数据',
				loginStatus   : '',
				item         : '',
				id           : '',
				sid          : '',
				param        : '',
				froms        : '',
				uinfo        : {},
				isShare		 : 0
			}
		},
		methods:{
			closeDailog(){
				this.isLogin = false
			},
			goBack(){
				this.$route.query.key = ''
				if(this.key){
					this.key = ''
					this.getStoreList(1)
					removeCookie('key')
					return
				}
				this.$router.go(-1)
			},
			getCateList(){
				this.uinfo = this.urlParams()
				let info = {
					userinfo : {
						uid :   this.uinfo.uid   || '',
						token : this.uinfo.token || ''
					},
					type     : getCookie('type') || this.$route.query.type
				}
				if(!this.isWeChat){
					info.flag = 'wechat'
				}
				this.$vux.loading.show({text: '加载中'})
				this.$axiosPost('/api/onlinestore/getstorecate',{
					data : JSON.stringify(info)
				}).then( res => {
					this.$vux.loading.hide()
					if(res){
						this.platformList = res
						if(!this.platformName){
							this.platformName = res[0].cat_name
							this.platformId   = res[0].id
							this.cat_pid      = res[0].cat_pid
							localStorage.setItem('id',JSON.stringify(res[0].id))
							localStorage.setItem('pid',JSON.stringify(res[0].cat_pid))
						}
					}					
				})
			},
			logStatus(status,froms){
				this.loginStatus = status
				this.froms       = froms
			},
			closeRel(){
				this.hasStore = false
			},
			getStoreList(page){
				if(!this.hasPage){
					return
				}
				if(this.key){
					setCookie('key',this.key)
				}
				//this.uinfo = this.urlParams()
				let info = {
					userinfo : {
						uid   : this.uinfo.uid   || '',
						token : this.uinfo.token || ''
					},
					id  	 : this.platformId,
					cat_name : this.platformName,
					key      : this.key,
					page     : page,
					pageSize : this.pageSize
				}
				if(!this.isWeChat){
					info.flag = 'wechat'
				}
				this.$vux.loading.show({text:"加载中"})
				this.$axiosPost('/api/Onlinestore/getStoreList',{
					data : JSON.stringify(info)
				}).then( res => {	
					this.$vux.loading.hide()
					if(res.status === 200 && page === 1){
						this.hasStore = false
						this.storeList = res.data
					}
					if(res.status === 200 && page > 1){
						res.data.forEach( item => {
							this.storeList.push(item)	
						})
					}
					if(res.status === 404 && page > 1){
						this.hasPage = false
						this.hasData = res.msg || "已加载全部数据"
					}
					if(res.status === 403 && page === 1){
						this.storeList = []
						this.hasStore = true
						this.$vux.toast.text(res.msg || '暂无数据','top')
					}
				})
			},
			toGetStore(id,sid,item){
				localStorage.setItem('storeAvatar',JSON.stringify(item))
				//分享的
				if(this.isShare == 1){
					this.$router.push({
						path:'shareDetail',
						query:{
							shop_id:item.shop_id,
							platformId:this.platformId,
							cat_pid   :this.cat_pid
						}})
					return
					
				}
				if(item.user_status == 0){
					return
				}
				//新 -认领
				if(this.type == 'onlinestore'){
					this.$router.push({
						path:'sharingFriends',
						query:{
							shop_id:item.shop_id,
							platformId:this.platformId,
							cat_pid   :this.cat_pid
						}})
					return
				}
				//认领的

				this.param = 'shopList'
				this.item = item
				this.id   = id
				this.sid  = sid				
				let uinfo = this.urlParams()				
				if(!uinfo){
					return
				}				
//				let fuid = getUrlParam('fuid')
//				console.log(fuid)
//				if(item.state == 0 && (fuid && fuid != '0')){
//					this.$router.push({path:'/relevance',query:{type:'online',id:id}})
//					return
//				}

				if(item.state == 0){
					this.$router.push({path:'/getStore',query:{id:id,sid:sid}})
				}else if(item.state == 1){
					return
				}				
			},
			stopSub(e){
				e.preventDefault()
				if(this.key){
					this.page = 1
					this.getStoreList(this.page)
				}
			},
			urlParams(){
				let urlInfo = {
					uid   : getUrlParam('uid')   || getCookie('uid'),
					token : getUrlParam('token') || getCookie('token')
				}
				if(!this.isWeChat){
					if(!urlInfo.uid || !urlInfo.token){
						//this.param = onload
						this.isLogin = true
						return false
					}
				}
				return urlInfo
			},
			handlePlatform(){
				if(!this.showPlatform){
					this.showPlatform = true
				}else{
					this.showPlatform = false
				}
				
			},
			closePlatform(){
				this.showPlatform = false
			},
			closeParPlatform(param){
				this.platformId   = param.id
				this.cat_pid      = param.cat_pid
				this.platformName = param.name
				localStorage.setItem('id',JSON.stringify(param.id))
				localStorage.setItem('pid',JSON.stringify(param.cat_pid))
				localStorage.setItem('name',JSON.stringify(param.name))
				this.showPlatform = false
			},
			isWeixin(){
				let agent = navigator.userAgent.toLowerCase();
			    if (agent.match(/MicroMessenger/i) == "micromessenger") {
			       	this.isWeChat = false
			       	document.getElementById('scroll').style.top= 1.15 + "rem"
			    } else {
			        this.isWeChat = true
			    }
			}
		},
		watch:{
			platformName(){					
				this.hasPage = true
				this.page = 1				
				//this.key = this.$route.query.key || this.key
				if(this.$route.query.key){
					this.key = this.$route.query.key || this.key
					this.$route.query.key = ''
				}
				this.getStoreList(this.page)
			},
			loginStatus(){
				this.uinfo  = this.urlParams()
				if(this.loginStatus === 'success' && this.froms === 'shopList'){
					this.toGetStore(this.id,this.sid,this.item)
				}else{
					this.getStoreList(1)
				}
			}
		},
		mounted(){	
			this.isWeixin()
			this.type = this.$route.query.type 
			if(this.type !== getCookie('type')){
					localStorage.removeItem('id')
					localStorage.removeItem('name')
			}
			setCookie('type',this.$route.query.type,30)			
			document.title = '选择店铺'
			this.isShare = this.$route.query.share || 0
			this.getCateList()
			this.cat_pid      = JSON.parse(localStorage.getItem('pid'))  || ''
			this.platformId   = JSON.parse(localStorage.getItem('id'))   || ''
			this.platformName = JSON.parse(localStorage.getItem('name')) || ''
			
			this.Bscroll = new Bscroll(this.$refs.store,{
				click : true,
				probeType : 3,
				pullUpLoad: {
				  	threshold: -50
				}
			})			
			this.Bscroll.on('pullingUp', () => {
				this.getStoreList(++this.page)
				this.Bscroll.finishPullUp()
				this.Bscroll.refresh()
			})
		},
		components:{
			Release,
			PlatformList,
			Login
		}
	}
</script>

<style lang="less" scoped>
	@import '~styles/mixin.less';
	@import '~vux/src/styles/1px.less';
	.coinlist /deep/ .vux-1px-b{
		border-color: red;
	}
	.coinlist{
		text-align: left;
		.top{
			position:fixed;
			top:0;
			left:0;
			right:0;
			z-index:299;
			background:#eee;
			.header{
				position:relative;
				height:1.44rem;
				line-height:2rem;
				text-align:center;
				background:#f7f7f8;
				font-size: .36rem;
				.iphonex;
				.back-icon{
					height:.9rem;
					line-height:.9rem;
					position: absolute;
					left: 0;
					top: .54rem;
					padding: 0 .2rem;
				}
			}
			.search-bar{
				position:relative;
				display: flex;
				margin: 0 auto;
				margin:.3rem 0;
				width: 90%;
				.platform{
					min-width:1.7rem;
					white-space:nowrap;
					padding:0 .1rem;
					width: 1rem;
					line-height: .55rem;
					font-size:.28rem;
					text-align:center;
					.iconfont{
						font-size: .2rem;
					}
				}
				.search-warrp{
					overflow: hidden;
					height: .55rem;
					flex: 1;
					position:relative;
					border-radius: .1rem;
					.search-icon{
						position: absolute;
						left: .2rem;
						top: .06rem;
						padding-right: .2rem;
						height: .4rem;
						width: .4rem;
						font-size: .4rem;
					}
					form{
						height: 100%;
						width: 100%;
						.search-ipt{
							padding-left: .8rem ;
							height: 100%;
							width: 100%;
							border: none;
						}
					}
				}
	
			}
		}		
			.content{
				overflow: hidden;
				position: absolute;
				top: 1.2rem;
				left: 0;
				right: 0;
				bottom: 0;
				padding: 0 .3rem;
				background: #fff;
				.content-item{
					position: relative;
					padding: .2rem 0;
					display: flex;
					.store-avatar{
						overflow: hidden;
						width: 1rem;
						height: 1rem;
						border-radius: .06rem;
					}
					.store-info{
						margin-left: .2rem;
						overflow: hidden;
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: center;
						.title{
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							font-size: .32rem;
							line-height: .5rem;
						}
						.desc{
							height: .38rem;
							line-height: .38rem;
							color: #a1a1a1;
							font-size: .24rem;
						}
					}
					.store-status{
						height: 1rem;
						line-height: 1rem;
						width: 1.5rem;
						color: #f14831;
					}
					.st-sh{
						color: #4e77e8;
					}
					.right-icon{
						position: absolute;
						right: 0;
						top: 50%;
						margin-top: -.25rem;
						height: .5rem;
						width: .5rem;
						line-height: .5rem;
						text-align: right;
						color: #a1a1a1;
					}
				}
				.more-data{
					line-height: .4rem;
					text-align: center;
					color: #ccc;
				}
				.tip{
					line-height: 1rem;
					text-align: center;
					color: #ccc;
				}
			}
		
		.drop{
			z-index: 110;
			position: fixed;
			margin: auto;
			top:0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(0,0,0,.6);
		}
		.fade-enter-active,.fade-leave-active{
			transition: transform .2s ease-out;
		}
		.fade-enter,.fade-leave-to{
			transform: translateY(-5rem);
		}
		.fade-drop-enter-active,.fade-drop-leave-active{
			transition: opacity .4s ease-in-out;
		}
		.fade-drop-enter,.fade-drop-leave-to{
			opacity: 0;
		}
		.fadeOI-enter-active,.fadeOI-leave-active{
			transition: opacity .4s ease-out;
		}
		.fadeOI-enter,.fadeOI-leave-to{
			opacity: 0;
		}

	}
</style>